<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/data.js"></script>
</head>
<style>
    p {
        width: 600px;
        height: 100px;
        border: 1px solid blueviolet;
        margin: auto;
    }

    p span {
        display: block;
        width: 80px;
        height: 30px;
        border: 1px solid red;
        float: left;
        margin-left: 20px;
    }

    i {
        display: block;
        width: 60px;
        height: 60px;
        border: 2px solid green;
        float: right;
        font-size: 25px;
    }

    div {
        width: 500px;
        height: 300px;
        border: 2px solid red;
        margin: auto;

    }

    dl::after {
        content: "";
        clear: both;
        display: block;
    }

    dd {
        width: 60px;
        height: 40px;
        border: 1px solid black;
        float: left;
    }

    dt {
        float: left;
    }

    a {
        display: block;
        margin-left: 10px;
        float: right;
    }
</style>

<body>
    <p>
        <span></span>
        <span></span>
        <span></span>
        <span></span>

        <i>
            5299
        </i>

    </p>
    <div>
        <!-- <dl>
            <dt>选择颜色</dt>
            <dd>金色</dd>
            <dd>白色</dd>
            <dd>蓝色</dd>
        </dl> -->

    </div>
    <script>
        var goodDatas = goodData.goodsDetail.crumbData
        var div = document.querySelector("div")
        console.log(goodDatas)
        goodDatas.forEach(function (iteam, index) {
            console.log(iteam)
            var dl = document.createElement("dl")
            dl.setAttribute("indexdl", index)
            var dt = document.createElement("dt")
            dt.innerHTML = iteam.title
            dl.appendChild(dt)
            iteam.data.forEach(function (iteam1, index1) {
                var dd = document.createElement("dd")
                dd.innerHTML = iteam1.type
                dd.setAttribute("price", iteam1.changePrice)
                dl.appendChild(dd)
            })
            div.appendChild(dl)
        });
        // 遍历p的span
        var pspan = document.querySelectorAll("p span")
        pspan.forEach(function (iteamp, indexp) {
            iteamp.setAttribute("indexp", indexp)
        })
        // 遍历dd
        var dd = document.querySelectorAll("dd")
        var pspan = document.querySelectorAll("p span")
        var i = document.querySelector("i")
        dd.forEach(function (iteamdd, indexdd) {
          
            iteamdd.onclick = function () {
                i.innerHTML=5299
                var xiabiao = iteamdd.parentNode.getAttribute("indexdl")
                var aa = document.createElement("a")
                aa.innerHTML = "X"
                jiage = iteamdd.getAttribute("price")
                pspan[xiabiao].innerHTML = iteamdd.innerHTML
                pspan[xiabiao].setAttribute("changpric",jiage)   
                pspan[xiabiao].appendChild(aa)           
          
                // 价格
                // i.innerHTML = Number(i.innerHTML) + Number(jiage)  
                jiagejisuan()
                function jiagejisuan(){
                    pspan.forEach(function(iteamsp,indexsp){
                    if(iteamsp!=null){
                        jiagejia = iteamsp.getAttribute("changpric")                     
                        i.innerHTML=Number(i.innerHTML)+ Number(jiagejia) 
                       
                    }
                })
                }               
                XXX(i.innerHTML)
            }
       
        })
        // 遍历a
        function XXX() {
            console.log(i.innerHTML)
            var aX = document.querySelectorAll("span a")
            var pp = document.querySelector("p")
            var pspan = document.querySelectorAll("p span")
            aX.forEach(function (iteama, indexa) {      
                iteama.onclick = function () {
                    i.innerHTML=5299
                    console.log(iteama.parentNode)
                    var lll = iteama.parentNode
                    jiagejiah = lll.getAttribute("changpric") 
                    console.log(i.innerHTML)
                  console.log(jiagejiah)
                  i.innerHTML=Number(i.innerHTML)-(Number(jiagejiah)) 
                    iteama.parentNode.innerHTML = null        

                    
                }
            })
        }

        // 





    </script>
</body>

</html>